import React, { FC, useState } from 'react';
import { Select, Card, Input, Row, Col, Button, Table } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  const navigate = useNavigate();
  const [company, setCompany] = useState('');
  const [location, setLocation] = useState('');
  const [manager, setManager] = useState('');
  const [phone, setPhone] = useState('');

  // 模拟表单数据
  const [data, setData] = useState([
    {
      key: '1',
      company: '公司1',
      location: '位置1',
      manager: '负责人1',
      phone: '12345678901',
      creditCode: '123456789012345678',
    },
    {
      key: '2',
      company: '公司2',
      location: '位置2',
      manager: '负责人2',
      phone: '12345678902',
      creditCode: '234567890123456789',
    },
    {
      key: '3',
      company: '公司3',
      location: '位置3',
      manager: '负责人3',
      phone: '12345678903',
      creditCode: '345678901234567890',
    },
    {
      key: '4',
      company: '公司4',
      location: '位置4',
      manager: '负责人4',
      phone: '12345678904',
      creditCode: '456789012345678901',
    },
    {
      key: '5',
      company: '公司5',
      location: '位置5',
      manager: '负责人5',
      phone: '12345678905',
      creditCode: '567890123456789012',
    },
    {
      key: '6',
      company: '公司6',
      location: '位置6',
      manager: '负责人6',
      phone: '12345678906',
      creditCode: '678901234567890123',
    },
    {
      key: '7',
      company: '公司7',
      location: '位置7',
      manager: '负责人7',
      phone: '12345678907',
      creditCode: '789012345678901234',
    },
    {
      key: '8',
      company: '公司8',
      location: '位置8',
      manager: '负责人8',
      phone: '12345678908',
      creditCode: '890123456789012345',
    },
  ]);

  const columns = [
    { title: '公司名称', dataIndex: 'company', key: 'company' },
    { title: '归属地', dataIndex: 'location', key: 'location' },
    { title: '负责人', dataIndex: 'manager', key: 'manager' },
    { title: '联系电话', dataIndex: 'phone', key: 'phone' },
    { title: '统一社会信用代码', dataIndex: 'creditCode', key: 'creditCode' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <span>
          <Button type="link">查看</Button>
          <Button type="link">编辑</Button>
          <Button type="link">删除</Button>
        </span>
      ),
    },
  ];

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        制证公司
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <div className="selectr" style={{ border: 'none' }}>
          <Row gutter={16}>
            <Col span={8}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                <div style={{ fontWeight: 'bold', marginRight: '8px' }}>公司名称：</div>
                <Select
                  placeholder="请选择公司名称"
                  style={{ width: '50%' }}
                  value={company}
                  onChange={value => setCompany(value)}
                >
                  <Option value="company1">公司1</Option>
                  <Option value="company2">公司2</Option>
                  <Option value="company3">公司3</Option>
                </Select>
              </div>
            </Col>
            <Col span={8}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                <div style={{ fontWeight: 'bold', marginRight: '8px' }}>归属地：</div>
                <Select
                  placeholder="请选择归属地"
                  style={{ width: '50%' }}
                  value={location}
                  onChange={value => setLocation(value)}
                >
                  <Option value="location1">位置1</Option>
                  <Option value="location2">位置2</Option>
                  <Option value="location3">位置3</Option>
                </Select>
              </div>
            </Col>
            <Col span={8}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                <div style={{ fontWeight: 'bold', marginRight: '8px' }}>负责人：</div>
                <Input
                  placeholder="请输入负责人名字"
                  value={manager}
                  onChange={e => setManager(e.target.value)}
                  style={{ width: '50%' }}
                />
              </div>
            </Col>
          </Row>
          <Row gutter={16} style={{ marginTop: '16px' }}>
            <Col span={12}>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{ fontWeight: 'bold', marginRight: '8px' }}>联系电话：</div>
                <Input
                  placeholder="请输入联系电话"
                  value={phone}
                  onChange={e => setPhone(e.target.value)}
                  style={{ width: '50%' }}
                />
              </div>
            </Col>
            <Col span={12} style={{ textAlign: 'right' }}>
              <Button type="primary" style={{ marginRight: '8px' }}>
                查询
              </Button>
              <Button
                onClick={() => {
                  setCompany('');
                  setLocation('');
                  setManager('');
                  setPhone('');
                }}
              >
                重置
              </Button>
            </Col>
          </Row>
          <Button
            type="primary"
            style={{ marginTop: '16px' }}
            onClick={() => navigate('/city/210100/unit/k12/course4Add')}
          >
            添加按钮
          </Button>
        </div>
        <div className="menu">
          <Table columns={columns} dataSource={data} bordered={false} />
        </div>
      </Card>
    </div>
  );
};

export default SchoolInfoAudit;
